<template>
	<view id='tagAllModal'>
		<view class='tag-modal' :class='{show:  show}' :style='{top: top + "px"}' @click='handleClose'>
			<view class="modal" @click.stop>
				<view class='modal-title'>全部标签</view>
				<view class='tags'>
					<view class='tag-item' :class='{active: value == item.id}' v-for='item in tags' :key='item.id'
						@click='handleChange(item)'>{{item.title}}</view>
				</view>
				<view class='foot'>
					<view class='btn-item' @click='handleAction("mang")'>
						<image class='icon' src='https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/setting.png'></image>
						<text>管理标签</text>
					</view>
					<view class='btn-item' @click='handleAction("add")'>
						<image class='icon' src='https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/add.png'></image>
						<text>添加标签</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: String,
			tags: Array
		},
		data() {
			return {
				show: false,
				top: 0
			}
		},
		methods: {
			handleOpen() {
				let that = this;
				const query = uni.createSelectorQuery().in(this);
				query
				  .select("#tagAllModal")
				  .boundingClientRect((data) => {
				     that.top = data.top
					 that.show = true;
				  })
				  .exec();
			},
			handleClose() {
				this.show = false;
			},
			handleChange(item) {
				this.$emit('input',item.id)
				this.$parent.reg()
				this.handleClose()
			},
			handleAction(type) {
				this.$emit('action',type)
				this.handleClose()
			}
		}
	}
</script>

<style scoped lang="scss">
	.tag-modal {
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		z-index: 999999999;
		display: none;
		
		&.show {
			display: block;
		}
		
		.modal {
			width: 100%;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 32rpx 32rpx;
			padding: 24rpx 32rpx 40rpx 32rpx;
			
			.modal-title {
				font-weight: 500;
				font-size: 28rpx;
				color: var(--h1Color);
				line-height: 40rpx;
			}
			
			.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 18rpx;
				margin-top: 32rpx;
				
				.tag-item {
					height: 72rpx;
					background: var(--tagBg);
					border-radius: 8rpx;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: var(--h1Color);
					
					&.active {
						background: var(--primaryBg);
						border: 2rpx solid #FFE359;
					}
				}
			}
			
			.foot {
				margin-top: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.btn-item {
					height: 70rpx;
					border-radius: 12rpx;
					border: 2rpx solid #EEEEEE;
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #222222;
					line-height: 1;
					
					&:first-child {
						margin-right: 24rpx;
					}
					
					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
</style>